<template>
  <div class="dark-input-wrapper" :style="style">
    <div
      :class="['dark-input-title', size == 'small' ? 'dark-input-title-small' : '']"
      v-if="title"
    >
      {{ title }}
    </div>
    <input
      v-model="value"
      @input="onInput"
      :placeholder="placeholder"
      :type="type"
      :readonly="readonly"
      :class="['dark-input', size == 'small' ? 'input-small' : '']"
    />
  </div>
</template>  
    
  <script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'

// 定义接收的 props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  style: {
    type: Object,
    default: null
  },
  readonly: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'big'
  },
  title: String
})

// 定义发出的事件
const emit = defineEmits(['update:modelValue'])

// 使用 ref 来管理输入框的值
const value = ref(props.modelValue)

// 监听 props 的变化，以同步内部状态
watch(
  () => props.modelValue,
  (newValue) => {
    value.value = newValue
  }
)

// 输入事件处理函数
const onInput = (event) => {
  value.value = event.target.value
  emit('update:modelValue', value.value)
}
</script>  
    
  <style lang="scss" scoped>
.dark-input-wrapper {
  display: inline-block;
  // height: 40px;
  background-color: rgba(0, 25, 51, 0.8);
  border-radius: 8px;
  border: 1px solid #0e9cff;
  display: flex;
  position: relative;
  transition: box-shadow 0.3s ease; /* 添加过渡效果，使荧光效果更平滑 */
  font-size: 1em;
}
.dark-input-wrapper:hover {
  box-shadow: 0 0 10px #1678e1;
  border-color: #1678e1;
}
.dark-input-title {
  display: inline-block;
  width: 60px;
  height: 100%;
  text-align: center;
  background-color: #0e9cff;
  line-height: 40px;
  border-radius: 3px;
}
.dark-input {
  flex: 1;
  display: inline-block; /* 使标题成为内联块级元素，以便与输入框对齐 */
  width: 100%;
  background-color: transparent;
  color: var(--dark-text-color);
  border-radius: 0.3em;
  border: none;
  outline: none;
  box-sizing: border-box;
  padding-left: 10px;
  line-height: 38px;
  // font-size: 18px;
  color: #b9eeff;
  &::placeholder {
    color: #b9eeff;
  }
}
.input-small {
  line-height: 30px;
}
.dark-input-title-small {
  line-height: 32px;
}
</style>